<template>
  <div id="pieRoseType" ref="pieRoseType" style="height: 30vh" />
</template>

<script>
export default {
  name: "PieRoseType",
  data() {
    return {};
  },
  mounted() {
    const pieRoseType = this.$echarts.init(this.$refs.pieRoseType, "light");
    const options = {
      title: {
        text: "",
      },
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b} : {c} ({d}%)",
      },
      legend: {
        x: "center",
        y: "bottom",
        data: ["员工总数", "技术大牛", "实习生", "项目主管", "项目经理", "HR"],
      },
      calculable: true,
      series: [
        {
          name: "员工分布数据",
          type: "pie",
          radius: [20, 110],
          center: ["50%", "60%"],
          roseType: "radius",
          label: {
            normal: {
              show: false,
            },
            emphasis: {
              show: true,
            },
          },
          lableLine: {
            normal: {
              show: false,
            },
            emphasis: {
              show: true,
            },
          },
          data: [
            { value: 35, name: "员工总数" },
            { value: 25, name: "技术大牛" },
            { value: 22, name: "实习生" },
            { value: 20, name: "项目主管" },
            { value: 15, name: "项目经理" },
            { value: 12, name: "HR" },
          ],
        },
      ],
    };
    pieRoseType.setOption(options);
  },
};
</script>